<template>
  <div>
    <van-nav-bar title="设置" class="van_bar" />
    <div class="content">
      <van-button plain @click="goRegister" class="btn" type="info" size="mini">新用户注册</van-button>
      <div v-if="token" style="display:flex;margin-left: 20px;">
        <van-image width="90px" height="90px" round :src="headPortrait" />
        <div class="USER_box">
          <div>{{name}}--{{content}}</div>
          <div>
            <van-button type="primary" @click="goOutFun" size="mini">退出登录</van-button>
          </div>
        </div>
      </div>
      <div v-else>
        <van-icon size="80" @click="LoginFun" name="https://b.yzcdn.cn/vant/icon-demo-1126.png" />
        <span class="login" @click="LoginFun">登录</span>
      </div>
      <van-divider content-position="left">常用</van-divider>
      <van-grid>
        <van-grid-item is-link :to="'/browing'" icon="underway-o" text="浏览历史" />
        <van-grid-item is-link :to="'/collect'" icon="star-o" text="我的收藏" />
        <van-grid-item icon="edit" text="我发布的" />
        <van-grid-item is-link icon="chat-o" text="我参与的" :to="'/part'" />
        <van-grid-item icon="vol ume-o" text="消息通知" />
        <van-grid-item icon="friends-o" text="关于我们" />
      </van-grid>
      <van-divider content-position="left">其他</van-divider>
      <van-grid>
        <van-grid-item icon="close" text="清空本地" @click="clearFn" />
        <van-grid-item icon="certificate" @click="serverFun" text="同步到服务" />
        <van-grid-item icon="down" @click="getServerFun" text="同步到本地" />
        <van-grid-item icon="comment-circle-o" text="版本信息" />
      </van-grid>
    </div>
  </div>
</template>

<script>
import { mapState, mapMutations } from "vuex";
import { Dialog } from "vant";
import { toast } from "vant";
import { removeToken, getToken } from "../utils/Cookie";
import { getStorage, addStorage, setZXCO, getZXCO } from "../utils/storage";
import { addServer, getServer, updateServer } from "../api/server";
import { setbrowing, getbrowing } from "../utils/browing";
export default {
  name: "setting",
  layout: "layoutMain",
  data() {
    return {
      content: "",
      token: getToken()
    };
  },
  computed: {
    ...mapState("user", ["name", "roles", "avatar", "id"]),
    headPortrait() {
      return this.avatar
        ? `http://192.168.0.117:3030/upload/${this.avatar}`
        : "https://b.yzcdn.cn/vant/icon-demo-1126.png";
    }
  },
  mounted() {
    setTimeout(() => {
      if (this.roles == "admin") {
        this.content = "管理员";
      }
      if (this.roles == "editor") {
        this.content = "普通用户";
      }
    }, 100);
  },
  methods: {
    ...mapMutations("user", ["setTokenFun", "clearId"]),

    LoginFun() {
      this.$router.push({ path: "login" });
    },
    goRegister() {
      this.$router.push({ path: "register" });
    },
    async serverFun() {
      let brow = getbrowing();
      let data = getStorage();
      let coll = getZXCO();
      Dialog.confirm({
        title: "同步到服务",
        message: "用户的上传操作，会覆盖服务器端的数据，请谨慎操作"
      })
        .then(async () => {
          let res = await getServer({ uid: this.id });
          console.log(res.data.data);
          if (res.data.data[0]) {
            await updateServer({
              uid: this.id,
              collection: JSON.stringify(coll),
              history: JSON.stringify(brow),
              progress: JSON.stringify(data)
            });
          } else {
            await addServer({
              uid: this.id,
              collection: JSON.stringify(coll),
              history: JSON.stringify(brow),
              progress: JSON.stringify(data)
            });
          }
          this.$toast("同步成功");
        })
        .catch(() => {
          // on cancel
        });
    },
    async getServerFun() {
      Dialog.confirm({
        title: "同步到本地",
        message: "下载操作会覆盖本地数据，要谨慎操作，以免数据丢失"
      })
        .then(async () => {
          let res = await getServer({ uid: this.id });
          let data = res.data.data[0];
          let progress = JSON.parse(data.progress);
          for (var i = 0; i < progress.length; i++) {
            addStorage(progress[i]);
          }
          let his = JSON.parse(data.history);
          for (var i = 0; i < his.length; i++) {
            setbrowing(his[i]);
          }
          let collection = JSON.parse(data.collection);
          for (var i = 0; i < collection.length; i++) {
            setZXCO(collection[i]);
          }
          this.$toast("同步成功");
        })
        .catch(() => {
          // on cancel
        });
    },
    goOutFun() {
      Dialog.confirm({
        title: "退出",
        message: "确定要退出登录？"
      })
        .then(() => {
          this.token = "";
          this.setTokenFun();
          this.clearId();

          removeToken();
          this.$toast("退出成功");
        })
        .catch(() => {
          // on cancel
        });
    },
    // 清空本地
    clearFn() {
      Dialog.confirm({
        title: "此操作将删除一切本地数据，请谨慎操作"
      })
        .then(() => {
          localStorage.clear();
        })
        .catch(() => {
          // on cancel
        });
    }
  }
};
</script>

<style lang="scss" scoped>
.van_bar {
  position: fixed;
  top: 0;
  width: 100%;
}
.content {
  position: absolute;
  top: 46px;
  bottom: 50px;
  overflow-y: auto;
  width: 100%;
}
.van-icon {
  display: flex;
  justify-content: center;
}
.login {
  width: 100%;
  display: inline-block;
  text-align: center;
  margin-top: 5px;
}
.USER_box {
  display: inline-block;
  height: 90px;
  margin-left: 10px;
}
.USER_box div {
  margin-top: 5px;
}
.btn {
  z-index: 9999999999999999999999999;
  position: absolute;
  right: 20px;
  top: 5px;
}
</style>